<template>
  <div id="app">
    <div class="slider-bar fl">
      <ul class="box">
        <li v-for="(item,index) of list" :key="index" @click="jump(item)">{{item.name}}</li>
      </ul>
    </div>
    <div class="content-box fr">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import router from '@/router'
export default {
  name: 'App',
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.list = router.options.routes
  },
  methods: {
    jump (item) {
      this.$router.push({ name: item.name })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 20px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  display: block;
  content: '';
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}
.content-box {
  /* padding:20px 0; */
  width: 100%;
  min-height: 200px;
}
.desc-box {
  margin: 20px auto;
  width: 100%;
  min-height: 200px;
  text-align: left;
}
</style>

<style scoped lang="scss">
ul {
  margin: 0;
  padding: 0;
}
.box {
  // margin:30px auto;
  width: 100%;
  list-style: none;

  li {
    margin: 0 auto;
    padding: 0;
    width: 92%;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background: rgb(81, 8, 218);
      color: #fff;
    }
  }
}

$sliderBarW: 200px;
$minH: 300px;
.slider-bar {
  width: $sliderBarW;
  min-height: $minH;
  background: #ddd;
}
.content-box {
  padding: 10px;
  width: calc(100% - #{$sliderBarW} - 40px);
  min-height: $minH;
  background: rgb(248, 243, 243);
}
</style>
